<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="上传文件组件类型">
                <el-radio-group v-model="propJson.uploadSelectType">
                    <el-radio label="button">按钮类型</el-radio>
                    <el-radio label="icon">框图类型</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="按钮名称" v-if="propJson.uploadSelectType === 'button'">
                <el-input v-model="propJson.buttonName" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="框图提示内容" v-if="propJson.uploadSelectType === 'icon'">
                <el-input v-model="propJson.buttonName" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="图标大小" v-if="propJson.uploadSelectType === 'icon'">
                <el-input v-model="propJson.iconFontSize" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="图标高度" v-if="propJson.uploadSelectType === 'icon'">
                <el-input v-model="propJson.iconFontHeight" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="文件上传地址">
                <el-input v-model="propJson.upLoadUrl" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="是否对上传文件数量进行限制">
                <el-radio-group v-model="propJson.isUpLoadLimit">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="文件限制数量" v-if="propJson.isUpLoadLimit">
                <el-input-number v-model="propJson.upLoadLimit" :min="1" />
            </el-form-item>

            <el-form-item label="是否展示上传的文件列表">
                <el-radio-group v-model="propJson.isShowFileList">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isShowFileList">默认展示文件列表</el-divider>

            <CommonThirdServiceValue v-if="propJson.isShowFileList" :actionInfo="propJson.defaultFileListInfo ? propJson.defaultFileListInfo : {}" :commonParam="commonParam" />

            <el-form-item label="列表展示类型" v-if="propJson.isShowFileList">
                <el-select v-model="propJson.listType" placeholder="列表展示类型" style="width: 100%">
                    <el-option label="文本展示" value="text" />
                    <el-option label="图片展示" value="picture" />
                    <el-option label="照片墙方式展示" value="picture-card" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否支持多选文件上传">
                <el-radio-group v-model="propJson.isMultiple">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持拖拽上传">
                <el-radio-group v-model="propJson.isDraggable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否禁用上传">
                <el-radio-group v-model="propJson.isDisabled">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否展示Tips">
                <el-radio-group v-model="propJson.isShowTips">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义Tip" v-if="propJson.isShowTips">
                <el-input v-model="propJson.tipInfo" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="是否添加文件大小限制">
                <el-radio-group v-model="propJson.isLimitFileSize">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="文件大小限制" v-if="propJson.isLimitFileSize">
                <el-input v-model="propJson.limitFileSize" style="width: 100%"/>
            </el-form-item>

            <el-divider>添加上传时携带的参数</el-divider>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addDataVariable()">添加请求入参</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.uploadDataValue">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteDataVariable(paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="paramItem.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="paramItem.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                            <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-divider>添加上传后响应参数映射</el-divider>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addResponseVariable()">添加响应出参映射</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-form-item label="是否添加后置三方服务">
                    <el-radio-group v-model="propJson.isAddAfterThirdExec">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider v-if="propJson.isAddAfterThirdExec"></el-divider>
                <br />
                <el-form-item label="三方服务编码" v-if="propJson.isAddAfterThirdExec">
                    <el-select v-model="propJson.afterThirdExecCode" placeholder="三方服务编码" style="width: 100%" clearable
                               @change="thirdExecAfterChange(propJson.afterThirdExecCode)"
                               @clear="thirdExecAfterClear()">
                        <el-option v-for="info in thirdExecList" :label="info.code" :value="info.code"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="参数配置" v-if="propJson.isAddAfterThirdExec">
                    <el-table :data="propJson.afterExecParamJson ? propJson.afterExecParamJson : []" :border="true"
                              :stripe="true"
                              :show-overflow-tooltip="true"
                              :max-height="200"
                              style="width: 100%;">
                        <el-table-column prop="name" label="字段名称"></el-table-column>
                        <el-table-column prop="type" label="字段类型"></el-table-column>
                        <el-table-column prop="description" label="字段描述"></el-table-column>
                        <el-table-column prop="value" label="字段值">
                            <template #default="scope">
                                <el-input v-model="scope.row.showInfo" @click="valueClick(scope, propJson.afterExecParamJson)"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-divider v-if="propJson.isAddAfterThirdExec"></el-divider>
            </el-form>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.uploadResponseParamList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteResponseVariable(paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数名称">
                            <el-select v-model="paramItem.variableName" placeholder="参数名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="参数值">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>

        <el-dialog v-model="dialogVisible" title="参数配置" width="30%">
            <el-form>
                <el-form-item label="类型" label-width="20%">
                    <el-radio-group v-model="formInfo.selectType">
                        <el-radio label="variable">关联变量</el-radio>
                        <el-radio label="custom">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br />
                <el-form-item v-if="formInfo.selectType === 'custom'" label="值" label-width="20%">
                    <el-input v-model="formInfo.customContent" />
                </el-form-item>
                <el-form-item v-if="formInfo.selectType === 'variable'" label="值" label-width="20%">
                    <el-select v-model="formInfo.variableName" placeholder="变量名称" style="width: 100%">
                        <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitDialog()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script name="FileUploadDrawer" setup lang="ts">
import {computed, defineProps, ref} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue"
import {getThirdExec} from "@/request/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

let thirdExecList = ref([])
let dialogVisible = ref(false);
let currentOperationIndex = ref(-1);
let dialogExecParamJson = ref([]);
let formInfo = ref({selectType: "custom", customContent: "", variableName: ""});

// 查询三方服务列表
let param = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 1000
    }
}
getThirdExec(param).then(res => {
    thirdExecList.value = res.data["dataList"];
})

function addDataVariable() {
    if (!propJson.value.uploadDataValue) {
        propJson.value.uploadDataValue = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "custom", variableType: "String", variableParamName: ""}
    propJson.value.uploadDataValue.push(variableInfo)
}

function deleteDataVariable(index) {
    // 删除数组中的数据
    propJson.value.uploadDataValue.splice(index, 1);
}

function addResponseVariable() {
    if (!propJson.value.uploadResponseParamList) {
        propJson.value.uploadResponseParamList.apiResponseList = []
    }
    let variableInfo = {variableName: "", variableValue: ""}
    propJson.value.uploadResponseParamList.push(variableInfo)
}

function deleteResponseVariable(paramIndex) {
    // 删除数组中的数据
    propJson.value.uploadResponseParamList.splice(paramIndex, 1);
}

function thirdExecAfterChange(code) {
    // 遍历所有列表，根据code查询出对应的execParam
    let execParam = "";
    for (let index = 0; index < thirdExecList.value.length; index++) {
        let info = thirdExecList.value[index]
        if (info.code === code) {
            execParam = info.execParam
            break
        }
    }
    if (execParam) {
        propJson.value.afterExecParamJson = JSON.parse(execParam)
    } else {
        propJson.value.afterExecParamJson = []
    }
}

function thirdExecAfterClear() {
    propJson.value.afterExecParamJson = []
}

function valueClick(scope, execParamJson) {
    dialogExecParamJson.value = execParamJson;
    currentOperationIndex.value = scope.$index
    let row = scope.row
    if (row.execParamInfo) {
        formInfo.value = row.execParamInfo;
    } else {
        formInfo.value = {selectType: "custom", customContent: "", variableName: ""};
    }
    dialogVisible.value = true
}

function submitDialog() {
    dialogVisible.value = false
    let execParamJsonInfo = dialogExecParamJson.value[currentOperationIndex.value]
    execParamJsonInfo.execParamInfo = formInfo.value;
    if (execParamJsonInfo.execParamInfo.selectType === 'custom') {
        execParamJsonInfo.showInfo = execParamJsonInfo.execParamInfo.customContent
    } else {
        execParamJsonInfo.showInfo = "变量." + execParamJsonInfo.execParamInfo.variableName
    }
}

</script>

<style scoped lang="less">

</style>